import React from 'react';
import { DemoBlock } from 'demos';
import { Space, Button } from '@pxxtech/component';

export default () => {
  return (
    <>
      <DemoBlock title="水平方向的间距">
        <Space>
          <Button>块1</Button>
          <Button>块2</Button>
          <Button>块3</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="换行">
        <Space wrap>
          <Button>块1</Button>
          <Button>块2</Button>
          <Button>块3</Button>
          <Button>块4</Button>
          <Button>块5</Button>
          <Button>块6</Button>
          <Button>块7</Button>
          <Button>块8</Button>
          <Button>块9</Button>
          <Button>块10</Button>
          <Button>块11</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="垂直方向的间距">
        <Space direction="vertical">
          <Button>块1</Button>
          <Button>块2</Button>
          <Button>块3</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="自定义间距大小">
        <Space
          style={{
            '--gap': '24px',
          }}
        >
          <Button>块1</Button>
          <Button>块2</Button>
          <Button>块3</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="渲染为块级元素">
        <Space direction="vertical" block>
          <Button>块1</Button>
          <Button>块2</Button>
          <Button>块3</Button>
        </Space>
      </DemoBlock>
    </>
  );
};
